<template>
	<view class="page-body" :class="[app.setCStyle()]">
		<u-navbar title="我要提货">
			<view slot="right" class="u-p-r-30 u-flex">
				<u-icon name="search" @click="showSearch = !showSearch"></u-icon>
				<view class="u-flex-1" @click="checkOut">
					<u-icon
						name="shopping-cart" 
						class="u-m-l-20">
					</u-icon>
					<u-badge type="error" :offset="[10,10]" :count="numberTotal"></u-badge>
				</view>
			</view>
		</u-navbar>
		<view class="u-page">
			<view class="goods_navbar">
				<view class="small">
					<u-tabs active-color="#C39F4F" :list="cateList" :is-scroll="true" :current="currentCate" @change="cateChange"></u-tabs>
				</view>
			</view>
			
			<view v-if="showSearch" class="bg-white mt20 p20">
				<u-search placeholder="输入关键字搜索" input-align="center" :show-action="false" v-model="keyword" @blur="loadData('refresh')" @clear="loadData('refresh')"></u-search>
			</view>

			<scroll-view class="goods-list" scroll-y @scrolltolower="loadData('add')">
				<view class="goods-list-grid">
					<!-- 列表 -->
					<view v-for="(item, index) in goodsList.itemList" :key="index" class="goods-item">
						<!-- 警告：微信小程序不支持嵌入lazyload组件，请自行如下使用image标签 -->
						<view class="image-wrapper ">
							<!-- #ifndef MP-WEIXIN -->
							<u-lazy-load threshold="250" border-radius="10" mode="aspectFill" :image="config.baseUrl+item.goods_thumb" :index="index"></u-lazy-load>
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							<image :src="config.baseUrl+item.goods_thumb" mode="aspectFill"></image>
							<!-- #endif -->
						</view>
						<view class="info-wrapper flex_bd">
							<view class="title goods_name">{{item.goods_name}}</view>
							<view class="title short_name">{{item.goods_name}}</view>
							<view class="price-box smll">
								<text class="flex_bd ff u-font-24">
									库存: {{item.goods_number}}
									<text class="u-m-l-20">已选:{{item.pickup_number}}</text>
								</text>
								<u-icon name="shopping-cart" color="#C39F4F" size="46rpx" @click="toggleSpec(item, index)"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<!-- 空白页 -->
				<empty v-if="goodsList.loaded === true && goodsList.itemList.length === 0"></empty>
			</scroll-view>
		</view>
		<view>
			<u-popup v-model="isShow" mode="bottom" :closeable="true">
				<view class="u-p-30">
					<view class="u-flex u-p-b-40 u-border-bottom">
						<image width="160rpx" height="160rpx" :src="config.baseUrl+selectGoods.goods_thumb"></image>
						<view class="u-flex-1 u-m-l-20">
							<view class="u-font-32">{{selectGoods.goods_name}}</view>
							<view class="u-font-28 u-m-t-20" style="color:#999;">库存:{{selectGoods.goods_number}}件</view>
						</view>
					</view>
					<view class="u-p-t-40">
						<view class="u-font-700">选择提货数量</view>
						<view class="u-m-t-40 u-p-b-40">
							<u-number-box class="custom-numberbox" 
								size="36rpx"
								input-width="160"
								input-height="100"
								:long-press="false"  
								:value="selectGoods.pickup_number" 
								:index="selectGoodsIndex+':0'" 
								:min="0" 
								:max="selectGoods.goods_number" 
								:step="1" 
								@change="numberChange">
							</u-number-box>
						</view>
						<view class="u-p-20">
							<u-button class="gold-btn gold-btn-default" hover-class="none" @click="joinCart">加入购物车</u-button>
						</view>
					</view>
				</view>
			</u-popup>
			
			<u-popup v-model="isShowPopup" mode="bottom" z-index="99" >
				<view class="popbox">
					<view class="smll p20">
						<view class="title">
							提货清单
						</view>
						<u-icon @click="isShowPopup=false" name="close-circle-fill" color="#b2b2b2" size="48"></u-icon>
					</view>
					<scroll-view scroll-y class="content">
						<view v-for="(item, index) in selGoodsList" :key="index" v-if="item.pickup_number>0">
							<view class="goods-item b-tottom">
									<view class="image">
										<image :src="config.baseUrl+item.goods_thumb" mode="aspectFill"></image>
									</view>
									<view class="info right-sj">
										<view class="goods-name">{{item.goods_name}}</view>
										<view class="text-main mt20">
											<text class="fr">总计:{{item.pickup_number}}件</text>
										</view>
									</view>
							</view>
							<view class="p20 bg-white">
								<view v-if="item.skuList.length > 0">
									<view class="goods-sku left-yuan pickup-box b-tottom" v-for="(skuItem, skuIndex) in item.skuList" :key="skuIndex" v-if="skuItem.pickup_number>0">
										<view class="p10 flex">
											<text class="sku-name">{{skuItem.sku_name}}</text>
											<view class="sku-stock">
												数量：{{skuItem.pickup_number}}件
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import empty from "@/components/empty";
	export default {
		components: {
			empty
		},
		data() {
			return {
				purchaseType:3,
				goodsList:{
					itemList:[]
				},
				selGoodsList:{},
				cateName: '全部分类',
				cateId: 0, //已选三级分类id
				cateList: [], //分类列表
				cateMaskState: 0,
				keyword: '',
				param: {},
				numberTotal:0,
				isShowPopup:false,
				isShow:false,
				currentCate: 0,
				cateList: [{
					id: 0,
					name: '全部'
				}],
				showSearch: false,
				selectGoods:{},
				selectGoodsIndex:0,
				selectGoodsNumberData: {}
			}
		},
		onLoad(options) {
			this.loadData();
			this.loadCateList();
		},
		methods: {
			toggleSpec(goods, index){
				this.selectGoods = goods;
				this.selectGoodsIndex = index;
				this.isShow = true
			},
			//加载分类
			async loadCateList() {
				let that = this;
				this.$u.post('shop/api.goods/getCateList').then(res => {
					let cateList = res.data.list[0];
					for(let i in cateList){
						let item = [];
						item['id'] = cateList[i]['id'];
						item['name'] = cateList[i]['name'];
						that.cateList.push(item)
					}
					
				})
			},
			loadData() { //获取列表
				this.param.state = 'cloud';
				this.param.cateId = this.cateId;
				this.param.keyword = this.keyword;
				let that = this;
				this.$u.post('channel/api.stock/getList', this.param).then(res => {
					this.goodsList.itemList = res.data.list;
					this.goodsList.itemList.forEach(item=>{
						if (item.skuList.length > 0){
							item.skuList.forEach(function(skuItem,skuIndex){
								if (typeof(that.selGoodsList[item.goods_id]) == 'undefined'){
									skuItem.pickup_number = 0;
								}else{
									skuItem.pickup_number = that.selGoodsList[item.goods_id].skuList[skuIndex].pickup_number;
								}
							})
						}else{
							if (typeof(that.selGoodsList[item.goods_id]) == 'undefined'){
								item.pickup_number = 0;
							}else{
								item.pickup_number = that.selGoodsList[item.goods_id].pickup_number;
							}
						}
					})
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(this.goodsList, 'loaded', true);
				})
			},
			showSku(index) { //显示sku列
				let item = this.goodsList.itemList[index];
				if (item.skuList.length == 0) {
					return false;
				}
				this.$set(item, 'showSku', item.showSku === true || typeof(item.showSku) == 'undefined' ? false : true);
			},
			numberChange(data){
				this.selectGoodsNumberData = data;
			},
			joinCart(){
				let data = this.selectGoodsNumberData;
				if(data.index == undefined){
					return this.$u.toast('请选择提货的商品数量.');
				}
				let index = data.index.split(":") ;
				let goodsIndex = index[0];
				let skuIndex = index[1];
				let goods = this.goodsList.itemList[goodsIndex];
				if (goods.skuList.length > 0){
					if (goods.skuList[skuIndex].pickup_number > 0){
						goods.pickup_number -= goods.skuList[skuIndex].pickup_number;
						this.numberTotal -= goods.skuList[skuIndex].pickup_number;
					}
					goods.skuList[skuIndex].pickup_number = data.value;
					goods.pickup_number += data.value;
					this.numberTotal += data.value;
				}else{
					if (goods.pickup_number > 0){
						this.numberTotal -= goods.pickup_number;
					}
					goods.pickup_number = data.value;
					this.numberTotal += data.value;
				}
				this.selGoodsList[goods.goods_id] = goods;
				this.isShow = false;
			},
			showPopup(){
				this.isShowPopup = true;
			},
			checkOut(){//前往结算
				let data = {};
				data.goods = [];
				let goodsList = this.selGoodsList;
				
				Object.keys(goodsList).forEach(key=>{
					if (goodsList[key].skuList.length > 0){
						goodsList[key].skuList.forEach(skuItem=>{
							if (skuItem.pickup_number > 0){
								let goods = {};
								goods.goods_id = goodsList[key].goods_id;
								goods.sku_id = skuItem.sku_id;
								goods.goods_number = skuItem.pickup_number;
								data.goods.push(goods);
							}
						})
					}else{
						if (goodsList[key].pickup_number > 0){
							let goods = {};
							goods.goods_id = goodsList[key].goods_id;
							goods.sku_id = 0;
							goods.goods_number = goodsList[key].pickup_number;
							data.goods.push(goods);
						}
					}
				})
				if (data.goods.length < 1){
					return this.$u.toast('请选择需要提货的商品.');
				}
				this.$u.post('channel/api.flow/addCartByPickUp',data).then(res => {
					this.app.goPage('/pagesB/channel/flow/checkOut?purchaseType=3');
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-page {
		height: 100%;
		overflow: hidden;
	}
	
	.search_box{
		padding: 20rpx 30rpx;
		background-color: #fff;
	}

	.goods_navbar {
		width: 100%;
		background-color: #FFFFFF;
		padding: 15rpx 15rpx 0;
		line-height: 50rpx;
		z-index: 1;
	}

	.goods_navbar .allClass {
		position: relative;
		margin-left: 20rpx;
		margin-right: 30rpx;
		float: left;
		padding-right: 20rpx;
		padding-top: 20rpx;
	}

	.goods_navbar .allClass .cateName {
		max-width: 120rpx;
		white-space: nowrap;
		overflow: hidden;
	}

	.goods_navbar .allClass:after {
		content: "";
		position: absolute;
		top: 55%;
		right: -10rpx;
		border: 10rpx solid #000000;
		border-bottom-color: transparent;
		/* 设置透明背景色 */
		border-left-color: transparent;
		border-right-color: transparent;
	}

	.goods_navbar .allClass.active:after {
		border-top-color: transparent;
		/* 设置透明背景色 */
		border-bottom-color: #000;
		border-left-color: transparent;
		border-right-color: transparent;
		top: 40%;
	}

	.goods_navbar .icon {
		margin-top: 30rpx;
		margin-left: 30rpx;
		position: relative;
		width: 50rpx;
		float: left;
	}

	.goods_navbar .icon .u-badge {
		position: absolute;
		top: -10rpx !important;
		right: -10rpx !important;
	}

	.navbar {
		box-shadow: none !important;
		.current {
			&:after {
				display: none;
			}
			.sort_desc {
				&:after {
					border-bottom-color: transparent !important;
					/* 设置透明背景色 */
					border-left-color: transparent !important;
					border-right-color: transparent !important;
				}
			}
			.sort_asc {
				&:before {
					border-top-color: transparent !important;
					/* 设置透明背景色 */
					border-left-color: transparent !important;
					border-right-color: transparent !important;
				}
			}
		}

		.sort_icon {
			position: relative;
			height: 100%;
			margin-left: 10rpx;

			&:before {
				content: "";
				position: absolute;
				top: 25%;
				border: 8rpx solid;
				border-color:#999999;
				border-top-color: transparent;
				/* 设置透明背景色 */
				border-left-color: transparent;
				border-right-color: transparent;
			}

			&:after {
				content: "";
				position: absolute;
				bottom: 25%;
				border: 8rpx solid ;
				border-color:#999999;
				border-bottom-color: transparent;
				/* 设置透明背景色 */
				border-left-color: transparent;
				border-right-color: transparent;
			}
		}
	}

	.goods-list {
		position: relative;
		height: calc(100% - 178rpx);
	}

	/* 商品列表 宫格*/
	.goods-list-grid {
		z-index: 2;
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;

		.goods-item {
			display: block;
			width: calc(50% - 11rpx);
			background: #FFFFFF;
			margin-bottom: 20rpx;
			border-radius: 10rpx;

			&:nth-child(2n+1) {
				margin-right: 20rpx;
			}
		}

		.image-wrapper {
			width: 100%;
			height: 330rpx;
			border-radius: 3px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.info-wrapper {
			padding: 16rpx;

			.title {
				font-size: 28rpx;
				color: $font-color-dark;
				line-height: 40rpx;
				height: 80rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.goods_name {
				display: none;
			}

			.price-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 10rpx;
			}

			.price {
				font-size: 40rpx;
				line-height: 1;
				&:before {
					content: '￥';
					font-size: 24rpx;
				}
			}

			
		}
	}

	/* 商品列表 行*/
	.goods-list-row {
		z-index: 2;

		.goods-item {
			margin: 20rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;
			display: flex;
		}

		.image-wrapper {
			width: 220rpx;
			height: 220rpx;
			border-radius: 10rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.info-wrapper {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			overflow: hidden;
			position: relative;
			padding-left: 20rpx;

			.title {
				font-size: 28rpx;
				color: $font-color-dark;
				line-height: 40rpx;
				height: 80rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.short_name {
				display: none;
			}

			.price-box {
				align-items: center;
				justify-content: space-between;
				padding-right: 10rpx;
	
			}

			.price {
				font-size: 40rpx;
				line-height: 1;

				&:before {
					content: '￥';
					font-size: 24rpx;
				}
			}

			
		}
	}
	
</style>
